<template>
    <div>
    	<nav-bar title="购物车"></nav-bar>

        <div class="pay-detail">
      		<ul>
      			<li class="p-list" v-for="(goods,index) in shopcart" :key="goods.index">
      				<mt-switch v-model="goods.isSelected"></mt-switch>
      				<img src="">
      				<div class="pay-calc">
      					<p>{{goods.title}}</p>
      					<div class="calc">
      						<span>￥{{goods.sell_price}}</span>
      						<span @click="substract(goods)">-</span>
      						<span>{{goods.num}}</span>
      						<span @click="add(goods)">+</span>
      						<a href="javascript:;" @click="del()">删除</a>
      					</div>
      				</div>
      			</li>
      		</ul>
        </div>
        <div class="show-price">
        	<div class="show-1">
        		<p>总计(不含运费):</p>
        		<span>已经选择商品{{paymenet.count}}件,总价￥{{paymenet.price}}元</span>
        	</div>
        	<div class="show-2">
        		<mt-button type="danger" size="large">去结算</mt-button>
        	</div>
        </div>
    </div>
</template>
<script>
import GoodsTools from '@/GoodsTools'

export default {
    data () {
    	return {
      		shopcart:[], // 购物车数据
    	}
    },
    created() {
    	let goodsList = GoodsTools.getGoodsList();
    	let ids = Object.keys(goodsList).join(',');
    	this.$axios.get('http://localhost:3000/getshopcartlist?myid_like=8')
    	.then(res => {
    		/*方法一*/
    		// 给this.shopcart添加属性
    		/*res.data.forEach(goods => {
    			// 判断是否有该商品
    			if (goodsList[goods.myid]) {
    				goods.num = goodsList[goods.myid]
    			}
    			// 不管有没有都需要打钩
    			goods.isSelected = true;
    		})*/
    		// 先丰富好对象的属性，一次性赋值，有效

    		this.shopcart = res.data;
    		/*Object.defineProperty(this,'shopcart',{
				set:function(resData) {
					// 遍历resData的所有属性，并未shopcart的元素，逐个添加这些属性，并设置set
					// 遍历并监视器所有属性的set
				}
    		})*/

    		// this.shopcart = res.data;以后 循环，再私自给shopcart元素加属性，无效（指页面点击加或减按钮时不会及时显示更新数据）

    		// 方法二：如果一定是在数据不完整时添加属性，就需要手动通知vue完成响应式 -> 双向数据绑定
    		this.shopcart.forEach(goods => {
    			// 判断是否有该商品
    			if (goodsList[goods.myid]) {
    				//goods.num = goodsList[goods.myid]
    				this.$set(goods,'num',goodsList[goods.myid])
    			}
    			// 不管有没有都需要打钩
    			this.$set(goods,'isSelected',true);
    		})

    	})
    	.catch(err => console.log('购物车信息获取失败',err))
    },
    // 离开购物车(离开当前路由)时，保存购物车数据
    beforeRouteLeave (to, from, next) {
    	// 导航离开该组件的对应路由时调用
    	// 可以访问组件示例 'this'
    	if (confirm('亲，真的要离开吗？')) {
    		// 保存当前的剩余购物车数据
    		let obj = {};
    		this.shopcart.forEach( goods => {
    			obj[goods.myid] = goods.num;
    		});
    		GoodsTools.saveGoods(obj);
    		next();
    	} else {
    		next(false); // 取消导航行为
    	}
    },
    // 计算属性
    computed: {
    	paymenet() {
    		let price = 0;
    		let count = 0;
    		this.shopcart.forEach( goods => {
    			if (goods.isSelected) {
    				count += goods.num;
    				price += goods.num * goods.sell_price;
    			}
    		});
            // 改变store中的数据
            this.$store.dispatch('addNumByServerRate',{ num:count })
    		return {
    			count,price
    		};
    	}
    },
    methods: {
    	add(goods) {
    		goods.num ++;
    	},
    	substract(goods) {
			goods.num --;
    	},
    	del(index) {
    		this.shopcart.splice(index,1);
    	}
    }
}
</script>
<style scoped>
	.pay-detail ul li {
		list-style: none;
		border-bottom: 1px solid rgba(0,0,0,0.2);
		margin-bottom: 3px;
	}
	.pay-detail ul {
		padding-left: 5px;
		margin-top: 5px;
	}
	.pay-detail ul li > :nth-child(1),
	.pay-detail ul li > :nth-child(3) {
		display: inline-block;
	}
    .pay-detail ul li img {
    	width: 80px;
    	height: 80px;
    	display: inline-block;
    	vertical-align: top;
    	margin-top: 10px;
    }
	
	.pay-calc p {
		display: inline-block;
		width: 250px;
		overflow: hidden;
		color: blue;
	}
	.pay-detail ul li > :nth-child(1) {
		line-height: 80px;
	}
	.calc:nth-child(1) {
		color: red;
		font-size: 20px;
	}
    .calc span:not(:nth-child(1)) {
    	border: 1px solid rgba(0,0,0,0.3);
    	display: inline-block;
    	width: 20px;
    	text-align: center;
    }
	.pay-detail ul li {
		list-style: none;
	}

	.calc a {
		margin-left: 20px;
	}
	.show-1,
	.show-2 {
		margin-left: 30px;
		display: inline-block;
	}
	.show-price {
		background-color: rgba(0,0,0,0.2);
	}


</style>
